<template>
  <div>
    <div class="content">
      <router-view></router-view>
    </div>
    <van-tabbar v-model="active" route active-color="#FB8C24" inactive-color="#595959">
      <van-tabbar-item to="/home">
        <span>Explorar</span>
        <template #icon="props">
          <img :src="props.active ? m1c : m1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/favorite">
        <span>Favoritos</span>
        <template #icon="props">
          <img :src="props.active ? m2c : m2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/add">
        <span>Vender</span>
        <template #icon="props">
          <img :src="props.active ? m3c : m3" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/chat">
        <span>Conversas</span>
        <template #icon="props">
          <img :src="props.active ? m4c : m4" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/account">
        <span>Conta</span>
        <template #icon="props">
          <img :src="props.active ? m5c : m5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import m1 from "@/assets/images/m1.png";
import m1c from "@/assets/images/m1_ac.png";
import m2 from "@/assets/images/m2.png";
import m2c from "@/assets/images/m2_ac.png";
import m3 from "@/assets/images/m3.png";
import m3c from "@/assets/images/m3_ac.png";
import m4 from "@/assets/images/m4.png";
import m4c from "@/assets/images/m4_ac.png";
import m5 from "@/assets/images/m5.png";
import m5c from "@/assets/images/m5_ac.png";
export default {
  name: "Nav",
  data() {
    return {
      active: 0,
      m1: m1,
      m1c: m1c,
      m2: m2,
      m2c: m2c,
      m3: m3,
      m3c: m3c,
      m4: m4,
      m4c: m4c,
      m5: m5,
      m5c: m5c,
    };
  },
};
</script>

<style lang="less" scoped>
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  padding-bottom: 70px;
  overflow-y: auto;
  /deep/ .van-search {
    padding: 0;
    .van-search__content {
      background-color: #fff;
    }
  }
}
</style>
